<template>
  <div class="my-swiper">
    <swiper
      :modules="modules"
      :loop="true"
      :slides-per-view="0"
      :space-between="0"
      :speed="900"
      :autoplay="{ delay: 4000, disableOnInteraction: false }"
      :navigation="navigation"
      :slidesPerView="'auto'"
      :pagination="pagination"
      :centeredSlides="true"
      class="swiper-container"
      @slideChange="onSlideChange"
      @swiper="setSwiperInstance"
    >
      <swiper-slide v-for="(item, i) in num" :key="i">
        <!-- 内容 -->
        <div class="relative item">
          <!-- 中心 -->
          <img
            class="absolute z-0 img-0"
            :class="`img${i + 1}-0`"
            :src="getAssetsFile(`${i + 1}-0.png`)"
          />
          <!-- 人 -->
          <img
            class="absolute z-10 people"
            :class="`img${i + 1}-1`"
            :src="getAssetsFile(`${i + 1}-1.png`)"
          />
          <!-- 右侧 -->
          <img
            class="absolute z-10 slideInRight"
            :class="`img${i + 1}-2`"
            :src="getAssetsFile(`${i + 1}-2.png`)"
          />
          <!-- 左侧 -->
          <img
            class="absolute z-10 slideInLeft"
            :class="`img${i + 1}-3`"
            :src="getAssetsFile(`${i + 1}-3.png`)"
          />
        </div>
      </swiper-slide>
    </swiper>
    <img ref="prevRef" class="leftArrow2" :src="state.LeftArrow" />
    <img ref="nextRef" class="rightArrow2" :src="state.RightArrow" />
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import 'animate.css'
import 'animate.css/animate.compat.css'

import { Swiper, SwiperSlide } from 'swiper/vue'
import 'swiper/css'
import 'swiper/css/effect-fade'
import {
  Navigation,
  Pagination,
  Scrollbar,
  Autoplay,
  EffectFade
} from 'swiper/modules'
import 'swiper/css'
import 'swiper/css/pagination'
import LeftArrow from '../assets/arrow_left.png'
import RightArrow from '../assets/arrow_right.png'

const state = reactive({
  LeftArrow: LeftArrow,
  RightArrow: RightArrow
})
const navigation = ref({
  prevEl: '.leftArrow2',
  nextEl: '.rightArrow2'
})
const pagination = ref({
  clickable: true
})
const modules = [Autoplay, Pagination, Navigation, Scrollbar, EffectFade]
const num = ref([0, 1, 2, 3, 4])

function getAssetsFile(url) {
  return new URL(`../assets/${url}`, import.meta.url)
}

const swiperInstance = ref(null)
const setSwiperInstance = (swiper) => {
  swiperInstance.value = swiper
}
const onSlideChange = () => {
  if (swiperInstance.value) {
    swiperInstance.value.slides.forEach((slideEl) => {
      const circle = slideEl.querySelector('.img-0')
      if (circle) {
        circle.classList.remove('img-0')
        void circle.offsetWidth
        circle.classList.add('img-0')
      }

      const people = slideEl.querySelector('.people')
      if (people) {
        people.classList.remove('people')
        void people.offsetWidth
        people.classList.add('people')
      }

      const imgRight = slideEl.querySelector('.slideInRight')
      if (imgRight) {
        imgRight.classList.remove('slideInRight')
        void imgRight.offsetWidth
        imgRight.classList.add('slideInRight')
      }

      const imgLeft = slideEl.querySelector('.slideInLeft')
      if (imgLeft) {
        imgLeft.classList.remove('slideInLeft')
        void imgLeft.offsetWidth
        imgLeft.classList.add('slideInLeft')
      }
    })
  }
}
</script>

<style lang="scss" scoped>
.my-swiper {
  width: 100%;
  position: relative;
}

.swiper-container {
  overflow: hidden;
  position: relative;
  width: 1258px;
  height: 790px;
  position: relative;
}

.leftArrow2 {
  position: absolute;
  top: 50%;
  left: -75px;
  z-index: 1000;
  transform: translateY(-50%);
  cursor: pointer;
}

.rightArrow2 {
  position: absolute;
  top: 50%;
  right: -75px;
  z-index: 1000;
  transform: translateY(-50%);
  cursor: pointer;
}

//页码样式穿透 也可自定义页码
:deep(.swiper-pagination) {
  bottom: -30px;
}
:deep(.swiper-pagination-bullet) {
  margin: 0 15px !important;
  width: 50px;
  height: 50px;
  opacity: 1;
  background: url(../assets/bullet_off.png) no-repeat center;
  background-size: contain;
}
:deep(.swiper-pagination-bullet-active) {
  opacity: 1;
  background: url(../assets/bullet_on.png) no-repeat center;
}
:deep(.swiper-pagination-bullet:hover) {
}
:deep(.swiper-slide) {
  width: 100%;
  position: relative;
  // border-radius: 15px;
  // transition: transform 2s cubic-bezier(0.68, -0.55, 0.27, 1.55);
}
:deep(.swiper-slide-prev) {
  transform: scale(0.9);
}
:deep(.swiper-slide-next) {
  transform: scale(0.9);
}
:deep(.swiper-slide-active) {
  transform: scale(1);
  .item {
    .img-0 {
      opacity: 1;
    }
    .people {
      opacity: 1;
    }
    .slideInRight {
      opacity: 1 !important;
    }
    .slideInLeft {
      opacity: 1 !important;
    }
  }
}

.item {
  height: 790px;
  .img-0 {
    width: 998px;
    height: 876px;
    top: -50px;
    left: 150px;
    opacity: 0;
    animation: zoomIn .3s ease-in 0s forwards;
  }
  .people {
    opacity: 0;
    animation: slideInUp .5s ease-in 0s forwards;
  }
  .slideInRight {
    opacity: 0 !important;
    animation: slideInRight 0.6s ease-in 0s forwards;
  }
  .slideInLeft {
    opacity: 0 !important;
    animation: slideInLeft 0.8s ease-in 0s forwards;
  }
  .img1-1 {
    width: 151px;
    height: 213px;
    top: 530px;
    left: 790px;
  }
  .img1-2 {
    width: 307px;
    height: 619px;
    top: 0px;
    right: 0;
  }
  .img1-3 {
    width: 335px;
    height: 617px;
    top: 0px;
    left: 0px;
  }

  .img2-1 {
    width: 209px;
    height: 236px;
    top: 490px;
    left: 760px;
  }
  .img2-2 {
    width: 342px;
    height: 769px;
    top: 0;
    right: 0;
  }
  .img2-3 {
    width: 369px;
    height: 769px;
    top: 0;
    left: 0;
  }

  .img3-1 {
    width: 180px;
    height: 282px;
    top: 490px;
    left: 760px;
  }
  .img3-2 {
    width: 342px;
    height: 769px;
    top: 0;
    right: 0;
  }
  .img3-3 {
    width: 369px;
    height: 769px;
    top: 0;
    left: 0;
  }

  .img4-1 {
    width: 161px;
    height: 354px;
    top: 490px;
    left: 710px;
  }
  .img4-2 {
    width: 342px;
    height: 769px;
    top: 0;
    right: 0;
  }
  .img4-3 {
    width: 467px;
    height: 769px;
    top: 0;
    left: 0;
  }

  .img5-1 {
    width: 149px;
    height: 209px;
    top: 530px;
    left: 740px;
  }
  .img5-2 {
    width: 342px;
    height: 769px;
    top: 0;
    right: 0;
  }
  .img5-3 {
    width: 369px;
    height: 769px;
    top: 0;
    left: 0;
  }
}
.swiper-pagination-mrz {
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  .swiper-pagination-bullet {
    height: 50px;
    width: 50px;
    display: block;
    background: #f00;
  }
}
</style>
